const { Input, Form, Button, Spin, message } = antd;

function serviceLogin(username, password) {
    return request.get('/user/login', {
        params: {
            username,
            password,
        },
    });
}

function Login() {
    const submitHandler = values => {
        serviceLogin(values.name, values.password)
            .then(res => {
                if (res > 0) {
                    location.href = '/';
                } else {
                    message.warn('登录失败');
                }
            })
            .catch(err => {
                console.log(err);
            });
    };

    return (
        <div style={{ width: '100%', height: '100%', position: 'relative' }}>
            <div
                style={{
                    position: 'absolute',
                    left: '50%',
                    top: '40%',
                    width: '450px',
                    height: '370px',
                    background: '#fff',
                    boxShadow: '0px 0px 10px 0px #ccc',
                    transform: 'translate(-50%, -50%)',
                }}>
                <h1 style={{ textAlign: 'center', marginTop: '10px' }}>登录</h1>
                <div style={{ padding: '0px 40px', boxSizing: 'border-box', marginTop: '30px' }}>
                    <Form layout='vertical' onFinish={submitHandler}>
                        <Form.Item name='name' label='帐号' rules={[{ required: true, message: '请输入帐号' }]}>
                            <Input autoComplete='off' placeholder='请输入帐号' />
                        </Form.Item>
                        <Form.Item name='password' label='密码' rules={[{ required: true, message: '请输入密码' }]}>
                            <Input type='password' placeholder='请输入密码' />
                        </Form.Item>
                        <Form.Item style={{ textAlign: 'center', marginTop: '50px' }}>
                            <Button htmlType='submit' style={{ width: '100px' }} type='primary'>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    );
}

function App() {
    return <Login></Login>;
}
